<!doctype html>
<html lang="en">
<script type="text/javascript" src="{{ asset('admin') }}/lib/jquery/1.9.1/jquery.min.js"></script>

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="{{ asset('admin') }}/lib/webuploader/0.1.5/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="{{ asset('admin') }}/lib/webuploader/0.1.5/webuploader.min.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
	<div id="uploader" class="wu-example">
		<!--用来存放文件信息-->
		<div id="thelist" class="uploader-list"></div>
		<div class="btns">
			<div id="picker">选择文件</div>
			<button id="btn-star-file" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
		</div>
	</div>

</body>
</html>

<script>

    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: false,
        // swf文件路径
        swf: '{{ asset('admin') }}/lib/webuploader/0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: '{{ url('picture') }}',
		formData:{
            _token:'{{ csrf_token() }}',
		},

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    $list = $("#thelist");
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>' );
    });

    $btn = $("#btn-star-file");
    $btn.on('click', function () {
		uploader.upload();
    });
</script>